<template>
  <el-container>
    <el-header height="220">
      <el-steps :active="curStep" simple>
        <el-step title="考试信息" icon="el-icon-edit"></el-step>
        <el-step title="设计试卷" icon="el-icon-setting"></el-step>
        <el-step title="发布考试"></el-step>
      </el-steps>
    </el-header>

    <el-main>
      <!--设置考试信息：基本信息-->
      <el-card v-show="curStep === 1" style="margin: 5px">
        <div slot="header" class="cardHeader">
          <span>基本信息</span>
        </div>
        <el-form
          :model="examInfo"
          :rules="examInfoRules"
          ref="examInfoForm"
          label-width="100px"
        >
          <el-form-item label="考试名称" prop="examName">
            <el-col :span="20">
              <el-input
                v-model="examInfo.examName"
                style="width: 50%"
                placeholder="请输入名称"
              ></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="考试分类" prop="examDesc">
            <span slot="label">
              考试分类
              <el-tooltip placement="top">
                <div slot="content">考试分类<br /></div>
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
            <el-col :span="20">
              <el-select
                v-model="examInfo.examDesc"
                placeholder="请选择分类"
                style="width: 50%"
              >
                <el-option> </el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="考试须知" prop="examKnow">
            <span slot="label">
              考试须知
              <el-tooltip placement="top">
                <div slot="content">考试须知<br /></div>
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
            <el-col :span="20">
              <el-input
                v-model="examInfo.examKnow"
                style="width: 50%"
                type="textarea"
                :rows="4"
              ></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="考生安排" prop="">
            <el-col :span="15">
              <el-button type="primary" @click="dialogTableVisible1 = true"
                >选择考生</el-button
              >
              <el-button type="primary" @click="dialogTableVisible2 = true"
                >选择班级</el-button
              >
            </el-col>
            <el-col :span="20">
              <el-input
                v-model="examInfo.examKnow"
                style="width: 49%"
                type="textarea"
                :rows="4"
              ></el-input>
            </el-col>
          </el-form-item>
        </el-form>
      </el-card>
      <!-- 选择学生 -->
      <el-dialog title="选择学生" :visible.sync="dialogTableVisible1">
        <el-input placeholder="请输入内容进行搜索" v-model="searchinput">
          <el-select
            v-model="select"
            slot="prepend"
            placeholder="请选择"
            style="width: 150px"
            @change="out"
          >
            <el-option label="全部" value="全部"></el-option>
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            >
            </el-option>
          </el-select>
        </el-input>

        <el-table :data="handlesearch(gridData)">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            property="stuclass"
            label="班级"
            width="150"
          ></el-table-column>
          <el-table-column
            property="name"
            label="姓名"
            width="200"
          ></el-table-column>
          <el-table-column property="stuid" label="学号"></el-table-column>
        </el-table>
        <el-button style="margin:10px">确定</el-button>
      </el-dialog>
      <!-- 选择班级 -->
      <el-dialog title="选择班级" :visible.sync="dialogTableVisible2">
 <el-checkbox v-for="item in classlist" :label="item.label" :key="item.label"> 
        </el-checkbox>
      </el-dialog>
      <!--设置试卷 -->
      <el-card v-show="curStep === 2">
        <span
          style="float: right; color: red; font-weight: bold"
          v-show="makeModel === 1"
        >
          {{ "试卷总分：" + sumTotalScore }}</span
        >
        <!-- 题库组卷内容-->
        <div>
          <el-button icon="el-icon-plus" size="mini" @click="addBank"
            >添加题库</el-button
          >
          <!--存放题目的信息-->
          <el-table :data="addExamQuestion" border style="margin-top: 10px">
            <el-table-column label="题库" width="155" align="center">
              <template slot-scope="scope">
                <el-select
                  clearable
                  v-model="scope.row.bankName"
                  placeholder="请选择题库"
                >
                  <el-option
                    v-for="item in allBank"
                    :key="item.questionBank.bankId"
                    :label="item.questionBank.bankName"
                    :value="item.questionBank.bankName"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>

            <el-table-column label="单选题分数" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.singleScore"></el-input>
              </template>
            </el-table-column>

            <el-table-column label="多选题分数" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.multipleScore"></el-input>
              </template>
            </el-table-column>

            <el-table-column label="判断题分数" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.judgeScore"></el-input>
              </template>
            </el-table-column>

            <el-table-column label="简答题分数" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.shortScore"></el-input>
              </template>
            </el-table-column>

            <el-table-column label="操作" width="80" align="center">
              <template slot-scope="scope">
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  @click="delBank(scope.row.bankId)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>

      <el-card v-show="curStep === 3">
        <el-form
          :model="examInfo"
          :rules="examInfoRules"
          ref="examInfoForm"
          label-width="100px"
        >
          <el-form-item label="及格分数" prop="passScore">
            <el-input v-model="examInfo.passScore" :min="1"></el-input>
          </el-form-item>

          <el-form-item label="考试时长(分钟)" prop="examDuration">
            <el-input v-model="examInfo.examDuration" :min="1"></el-input>
          </el-form-item>

          <el-form-item label="考试开始时间" prop="startTime">
            <el-input
              style="margin-left: 5px"
              v-model="examInfo.startTime"
              type="date"
              placeholder="考试开始时间"
            >
            </el-input>
          </el-form-item>

          <el-form-item label="考试结束时间" prop="endTime">
            <el-input
              style="margin-left: 5px"
              v-model="examInfo.endTime"
              type="date"
              placeholder="考试结束时间"
            >
            </el-input>
          </el-form-item>
        </el-form>
      </el-card>
      <div style="padding: 8px">
        <el-button v-show="curStep !== 1" @click="curStep">上一步</el-button>
        <el-button v-show="curStep !== 3" type="primary" @click="curStep++"
          >下一步
        </el-button>
        <el-button v-show="curStep === 3" type="primary" @click="PublishExam"
          >提交
        </el-button>
      </div>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "PublishExamination",
  data() {
    return {
      gridData: [
        {
          stuclass: "软件1班",
          name: "王小虎",
          stuid: "2022023516",
        },
        {
          stuclass: "软件2班",
          name: "李小龙",
          stuid: "2022023640",
        },
        {
          stuclass: "软件3班",
          name: "赵小猫",
          stuid: "2022000013",
        },
        {
          stuclass: "软件2班",
          name: "王小虎",
          stuid: "2022000002",
        },
      ],
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      options: [
        {
          value: "选项1",
          label: "软件1班",
        },
        {
          value: "选项2",
          label: "软件2班",
        },
        {
          value: "选项3",
          label: "软件3班",
        },
      ],
      classlist:[
        {label:'软件1班'},
        {label:'软件2班'},
        {label:'软件3班'},

      ],

      select: "",
      dialogTableVisible1: false,
      dialogTableVisible2: false,
      picked: "",
      Signpicked: "",
      Fieldpicked: "",
      searchinput: "",
      //查询题目的参数
      queryInfo: {
        //题目类型下拉款所选的内容
        questionType: "",
        questionBank: "",
        questionContent: "",
        pageNo: 1,
        pageSize: 10,
      },
      //题目类型
      questionType: [
        {
          id: 1,
          name: "单选题",
        },
        {
          id: 2,
          name: "多选题",
        },
        {
          id: 3,
          name: "判断题",
        },
        {
          id: 4,
          name: "简答题",
        },
      ],
      //当前的步骤
      curStep: 1,
      //添加考试题目信息
      addExamQuestion: [],
      //添加字段
      addExamField: [],
      //所有题库信息
      allBank: [],
      //所有字段信息
      allField: [],
      //所有题目的对话框
      showQuestionDialog: false,
      //对话框中题目表格的加载
      loading: true,
      //所有题目的信息
      questionInfo: [],
      //所有题目的对话框中表格被选中
      selectedTable: [],
      //所有题目总数
      total: 0,
      //补充的考试信息
      examInfo: {
        examId: "",
        examDesc: "",
        examKnow: "",
        examWay: "",
        passScore: 0,
        examDuration: "",
        startTime: "",
        endTime: "",
      },
      //补充的考试信息的表单验证
      examInfoRules: {
        examName: [
          {
            required: true,
            message: "请输入考试名称",
            trigger: "blur",
          },
        ],
        examDesc: [
          {
            required: true,
            message: "请输入考试分类",
            trigger: "blur",
          },
        ],
        passScore: [
          {
            required: true,
            message: "请输入通过分数",
            trigger: "blur",
          },
        ],
        examDuration: [
          {
            required: true,
            message: "请输入考试时长",
            trigger: "blur",
          },
        ],
      },
    };
  },
  props: ["tagInfo"],
  created() {
    this.$emit("giveChildChangeBreakInfo", "添加考试", "添加考试");
    this.createTagsInParent();
    this.getBankInfo();
  },

  methods: {
    out() {
      console.log(this.select);
    },
    //向父组件中添加头部的tags标签
    createTagsInParent() {
      let flag = false;
      this.tagInfo.map((item) => {
        //如果tags全部符合
        if (item.name === "添加考试" && item.url === this.$route.path) {
          flag = true;
        } else if (item.name === "添加考试" && item.url !== this.$route.path) {
          this.$emit("updateTagInfo", "添加考试", this.$route.path);
          flag = true;
        }
      });
      if (!flag) this.$emit("giveChildAddTag", "添加考试", this.$route.path);
    },
    //删除当前需要去除的题库
    delBank(bankId) {
      this.addExamQuestion.forEach((item, index) => {
        if (item.bankId === bankId) this.addExamQuestion.splice(index, 1);
      });
    },
    //删除当前需要去除的字段
    delField(FieldId) {
      this.addExamField.forEach((item, index) => {
        if (item.FieldId === FieldId) this.addExamField.splice(index, 1);
      });
    },
    //添加题库组卷中的题库
    addBank() {
      this.addExamQuestion.push({
        bankName: "",
        singleScore: 1,
        multipleScore: 1,
        judgeScore: 1,
        shortScore: 1,
      });
    },

    handlesearch: function () {
      return this.gridData.filter((item) => {
        if (this.select == "全部" || this.select == "") {
          if (item.name.includes(this.searchinput)) {
            // 字符串索引有关键字值,返回true
            return item;
          }
        } else {
          if (
            item.name.includes(this.searchinput) &&
            item.stuclass.includes(this.select)
          ) {
            // 字符串索引有关键字值,返回true
            return item;
          }
        }
      });
    },
    //添加字段
    addField() {
      this.addExamField.push({
        FieldName: "",
        FormatRequire: "",
        YesOrNo: "",
      });
    },
    //处理表格被选中
    handleTableSectionChange(val) {
      this.selectedTable = val;
    },
    //分页页面大小改变
    handleSizeChange(val) {
      this.queryInfo.pageSize = val;
      this.getQuestionInfo();
    },
    //分页插件的页数
    handleCurrentChange(val) {
      this.queryInfo.pageNo = val;
      this.getQuestionInfo();
    },
  },
};
</script>
<style lang="less" scoped>
</style>

